<!-- 任务单详情弹窗 -->
<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="600px" :title="`${drawerProps.title}`">
    <el-space direction="vertical">
      <el-descriptions :column="2" title="订单状态" border>
        <el-descriptions-item width="400" label="订单id">{{ drawerProps.row!.orderId }}</el-descriptions-item>
        <el-descriptions-item width="400" label="订单类型">
          <el-tag v-if="drawerProps.row.orderType === 1" type="success">配送单</el-tag>
          <el-tag v-if="drawerProps.row.orderType === 2" type="danger">退货单</el-tag>
          <el-tag v-if="drawerProps.row.orderType === 3" type="warning">>换货单</el-tag>
        </el-descriptions-item>
        <el-descriptions-item width="400" label="客户id">{{ drawerProps.row!.customerId }}</el-descriptions-item>
        <el-descriptions-item width="400" label="任务状态">
          <el-tag v-if="drawerProps.row.orderStatus === 0" type="info">新建</el-tag>
          <el-tag v-if="drawerProps.row.orderStatus === 1" type="danger">缺货</el-tag>
          <el-tag v-if="drawerProps.row.orderStatus === 2" type="warning">待调度</el-tag>
          <el-tag v-if="drawerProps.row.orderStatus === 3" type="warning">>待出库</el-tag>
          <el-tag v-if="drawerProps.row.orderStatus === 4" type="warning">>运输中</el-tag>
          <el-tag v-if="drawerProps.row.orderStatus === 5" type="warning">到达分站</el-tag>
          <el-tag v-if="drawerProps.row.orderStatus === 6" type="warning">>派送中</el-tag>
          <el-tag v-if="drawerProps.row.orderStatus === 7" type="success">已完成</el-tag>
          <el-tag v-if="drawerProps.row.orderStatus === 8" type="success">已退货</el-tag>
          <el-tag v-if="drawerProps.row.orderStatus === 9" type="success">已换货</el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions :column="2" title="订单商品信息" border>
        <el-descriptions-item width="400" label="商品名称" :span="2">{{
          drawerProps.row!.orderItems?.[0].goodsName
        }}</el-descriptions-item>
        <el-descriptions-item width="400" label="商品id">{{ drawerProps.row!.orderItems?.[0].goodsId }}</el-descriptions-item>
        <el-descriptions-item width="400" label="商品单价">{{
          drawerProps.row!.orderItems?.[0].goodsPrice
        }}</el-descriptions-item>
        <el-descriptions-item width="400" label="商品数量">{{ drawerProps.row!.orderItems?.[0].count }}</el-descriptions-item>
        <el-descriptions-item width="400" label="计量单位">{{
          drawerProps.row!.orderItems?.[0].measureUnit
        }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions :column="2" title="订单详细信息" border>
        <el-descriptions-item width="400" label="总额" :span="2">{{ drawerProps.row!.totalAmount }}</el-descriptions-item>
        <el-descriptions-item width="400" label="备注信息" :span="2">{{ drawerProps.row!.orderRemark }}</el-descriptions-item>
        <el-descriptions-item width="400" label="收货地址" :span="2"
          >{{ drawerProps.row!.receiverAddress!.province }} {{ drawerProps.row!.receiverAddress!.city }}
          {{ drawerProps.row!.receiverAddress!.zone }} {{ drawerProps.row!.receiverAddress!.detail }}</el-descriptions-item
        >
        <el-descriptions-item width="400" label="收货人名">{{ drawerProps.row!.receiverName }}</el-descriptions-item>
        <el-descriptions-item width="400" label="收货人电话">{{ drawerProps.row!.receiverPhone }}</el-descriptions-item>
        <el-descriptions-item width="400" label="是否需要发票">
          <el-tag v-if="drawerProps.row.optInvoice === 0" type="success">是</el-tag>
          <el-tag v-if="drawerProps.row.optInvoice === 1" type="danger">否</el-tag>
        </el-descriptions-item>
        <el-descriptions-item width="400" label="发票Id">{{ drawerProps.row!.invoiceId }}</el-descriptions-item>
        <el-descriptions-item width="400" label="期望配送时间">{{ drawerProps.row!.expDeliveryTime }}</el-descriptions-item>
        <el-descriptions-item width="400" label="创建时间">{{ drawerProps.row!.createTime }}</el-descriptions-item>
        <el-descriptions-item width="400" label="创建人id">{{ drawerProps.row!.creatorId }}</el-descriptions-item>
        <el-descriptions-item width="400" label="发货时间">{{ drawerProps.row!.shippedTime }}</el-descriptions-item>
        <el-descriptions-item width="400" label="成交时间">{{ drawerProps.row!.completeTime }}</el-descriptions-item>
        <el-descriptions-item width="400" label="更新时间">{{ drawerProps.row!.updateTime }}</el-descriptions-item>
      </el-descriptions>
    </el-space>
    <el-form
      ref="ruleFormRef"
      label-width="100px"
      label-suffix=" :"
      :rules="rules"
      :disabled="drawerProps.isView"
      :model="drawerProps.row"
      :hide-required-asterisk="drawerProps.isView"
    >
    </el-form>
    <template #footer>
      <el-button @click="drawerVisible = false">关闭</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="DetailDrawer">
import { ref, reactive } from "vue";
import { Custom } from "@/api/interface";
// import { getUserInfo } from "@/api/modules/user";

const rules = reactive({
  customSatisfaction: [{ required: true, message: "请填写客户满意度" }],
  customEvaluation: [{ required: true, message: "请填写客户评价" }]
});

interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<Custom.ResOrderList>;
  courierName?: String;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {}
});

// 接收父组件传过来的参数
const acceptParams = async (params: DrawerProps) => {
  drawerProps.value = params;
  // if (drawerProps.value.row.taskStatus && drawerProps.value.row.taskStatus > 1) {
  //   const result = await getUserInfo({ userId: drawerProps.value.row.courierId ?? -1 });
  //   drawerProps.value.courierName = result.data.name;
  // }
  drawerVisible.value = true;
};

defineExpose({
  acceptParams
});
</script>
